@mixin line-hight($number) {
    height: $number;
    line-height: $number;
}
@mixin bg($bg) {
    background: url("../../../../#{$bg}") 100% 100% no-repeat;
    background-size: cover;
}
@mixin home_lg() {
    .recruitment {
        background: #fff;
        .table {
            @include bg("assets/images/recruitment_table_bg.png");
        }
    }
    .social {
        max-width: 1200px;
        margin: 0 auto;
        box-sizing: border-box;
        padding-bottom: 120px;
        // background: #e3e3e3;
        .social_title {
            background-color: #aa171f;
            color: #fff;
            @include line-hight(70px);
            font-size: 22px;
            text-align: center;
            margin-top: 33px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .title_text {
                width: 16%;
                // float: left;
            }
            .title_text.textName {
                flex: 1;
            }
        }
        .title_span {
            @include line-hight(80px);
            font-size: 20px;
            color: #333;
            display: inline-block;
            width: 16%;
            text-align: center;
            white-space: nowrap;
        }
        .title_span.titleName {
            flex: 1;
        }
        .title_details1 {
            display: inline-block;
            width: 16%;
            // width: 87px;
            height: 42px;
            line-height: 42px;
            // border: 0.01px solid #aa171f;
            text-align: center;
            color: #aa171f;
            font-size: 16px;

            // margin-left: 75px;
            position: relative;
            &::after {
                content: "查看详情";
                width: 87px;
                height: 42px;
                border-radius: 4px;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }
        }
        .title_details2 {
            display: none;
        }
        .is-active {
            .title_details1 {
                &::after {
                    background: #aa171f;
                    color: #fff;
                }
            }
        }
        h5,
        p {
            font-size: 16px;
            box-sizing: border-box;
            padding: 0 100px;
        }
        h5 {
            color: #aa171f;
        }
        p {
            color: #333;
        }
    }
    .life {
        max-width: 1200px;
        margin: 0 auto;
        box-sizing: border-box;
        margin-top: 60px;
        padding-bottom: 30px;
        .duty_item {
            display: flex;
            justify-content: space-between;
        }
        .img {
            // float: left;
           display: flex;
           align-items: center;
            max-width: 600px;
            .imgX{
                width: auto;
                height: auto;
            }
            border-right: 1px solid #f5f5f5;
        }
        .img2 {
            border-left: 1px solid #f5f5f5;
        }
        .content {
            width: 600px;
            // height: 280px;
            // float: left;
            text-align: center;
            color: #333;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            // border-left: 1px solid #f5f5f5;
            h3 {
                font-size: 24px;
                position: relative;
                // margin-top: 0.66px;
                padding: 0 30px;
                &::after {
                    content: "";
                    display: block;
                    position: absolute;
                    width: 29px;
                    height: 1px;
                    background: #aa171f;
                    bottom: -15px;
                    left: 50%;
                    transform: translate(-50%, 0);
                }
            }
            p {
                width: auto;
                margin-top: 40px;
                font-size: 16px;
                padding: 0 30px;
                text-align: left;
                // display: -webkit-box;
                // -webkit-box-orient: vertical;
                // -webkit-line-clamp: 6;
                // overflow: hidden;
            }
        }
        .content2 {
          width: 600px;
            // height: 280px;
            // float: left;
            // border-right: 1px solid #f5f5f5;
            text-align: center;
            color: #333;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            h3 {
                font-size: 24px;
                position: relative;
                // margin-top: 0.66px;
                padding: 0 30px;
                &::after {
                    content: "";
                    display: block;
                    position: absolute;
                    width: 29px;
                    height: 1px;
                    background: #aa171f;
                    bottom: -15px;
                    left: 50%;
                    transform: translate(-50%, 0);
                }
            }
            p {
                width: auto;
                margin-top: 40px;
                font-size: 16px;
                padding: 0 30px;
                text-align: left;
                // display: -webkit-box;
                // -webkit-box-orient: vertical;
                // -webkit-line-clamp: 6;
                // overflow: hidden;
            }
        }
    }
    .hiring {
        cursor: pointer;
        width: 93px;
        @include line-hight(43px);
        text-align: center;
        font-size: 20px;
        color: #fff;
        box-sizing: border-box;
        margin-left: 68px;
        margin-right: 68px;
        background: #aa171f;
        border-radius: 4px;
        margin-top: 10px;
    }
    .resume {
        margin: 0 80px;
        padding-bottom: 50px;
        h6 {
            font-size: 30px;
            margin: 0 auto;
            color: #333;
            position: relative;
            text-align: center;
            &::after,
            &::before {
                position: absolute;
                top: 50%;
                content: "";
                max-width: 371px;

                height: 1px;
                background: #e7e7e7;
            }
            &::after {
                left: 0;
            }
            &::before {
                right: 0;
            }
        }
        .input_box {
            margin-top: 70px;
            color: #333;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            .input_item {
               width: 48%;
                margin-top: 30px;
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                @include line-hight(50px);
                font-size: 0;
                span {
                    display: inline-block;
                    width: 80px;
                    text-align: center;
                    font-size: 20px;
                }
                input {
                    border: 1px solid #dcdfe6;
                    border-radius: 4px;
                }
                input,
                .el-input {
                    margin-left: 17px;
                    flex: 1;
                    @include line-hight(45px);
                }
                input:focus {
                    // box-sizing: border-box;
                    border: 3px solid #aa171f;
                    padding-left: 10px;
                    border: 1px solid #ccc;
                }
            }
        }
        .textarea {
            margin-top: 36px;
            display: flex;
            justify-content: flex-start;
            span {
                display: inline-block;
                width: 80px;
                text-align: center;
                font-size: 20px;
            }
            textarea {
                border-radius: 4px;
                border: 1px solid #dcdfe6;
                height: 181px;
                margin-left: 17px;
                flex: 1;
                box-sizing: border-box;
                padding-left: 10px;
                font-size: 18px;
            }
        }
        .btns {
            margin-top: 40px;
            display: flex;
            justify-content: flex-start;
            .upload {
                cursor: pointer;
                width: 173px;
                // height: 0.44px;
                @include line-hight(44px);
                border: 1px solid #aa171f;
                font-size: 24px;
                color: #aa171f;
                text-align: center;
                position: relative;
                overflow: hidden;
                span {
                    display: inline-block;
                    width: 100%;
                    height: 100%;
                }
                input {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    left: 0;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    opacity: 0;
                    font-size: 100px;
                }
            }
            .submit {
                cursor: pointer;
                width: 118px;
                font-size: 24px;
                text-align: center;
                @include line-hight(44px);
                background: #aa171f;
                color: #fff;
                margin-left: 17px;
            }
        }
        .imgs {
            margin-top: 40px;
            display: flex;
            justify-content: flex-end;

            img {
                width: 218px;
                height: 44px;
            }
        }
    }
    .close_box {
        margin: 0 80px;
        @include line-hight(80px);
        background-color: transparent;
        img {
            display: block;
            width: 40px;
            height: 40px;
            margin-top: 20px;
            float: right;
        }
    }
    .social_content {
        box-sizing: border-box;
        padding: 0 68px;
        font-size: 16px;
    }
    .page{
        width: 100%;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
@mixin home_sm() {
    .recruitment {
        background: #f8f8f8;
        overflow: hidden;
        .table {
            @include bg("assets/images/recruitment_table_bg.png");
        }
    }
    .social {
        box-sizing: border-box;
        // padding: 0 0.3rem;
        margin: 0.3rem;
        margin-bottom: 0.55rem;
        padding-bottom: 0.55rem;
        background: #fff;

        .social_title {
            background-color: #aa171f;
            color: #fff;
            @include line-hight(0.7rem);
            font-size: 0.26rem;
            text-align: center;
            // margin-top: 0.33rem;
            .title_text {
                width: 20%;
                float: left;
            }
        }
        .title_span {
            @include line-hight(0.8rem);
            font-size: 0.2rem;
            color: #333;
            display: inline-block;
            width: 20%;
            text-align: center;
            white-space: nowrap;
        }

        .title_details1 {
            display: none;
        }
        .title_details2 {
            display: inline-block;
            // width: 20%;
            width: 0.87rem;
            height: 0.42rem;
            line-height: 0.42rem;
            border: 0.01rem solid #aa171f;
            text-align: center;
            color: #aa171f;
            font-size: 0.16rem;
            border-radius: 0.08rem;
            margin-left: 0.8rem;
        }
        .is-active {
            .title_details2 {
                background: #aa171f;
                color: #fff;
            }
        }
        h5,
        p {
            font-size: 0.16rem;
            box-sizing: border-box;
            padding: 0 1rem;
        }
        h5 {
            color: #aa171f;
        }
        p {
            color: #333;
        }
        .social_content {
            box-sizing: border-box;
            padding: 0 0.34rem;
            font-size: 0.16rem;
        }
    }
    .life {
        max-width: 12rem;
        margin: 0 auto;
        box-sizing: border-box;
        // margin-top: 0.6rem;
        padding-bottom: 0.6rem;
        .duty_item {
            display: flex;
            flex-direction: column;
            padding: 0 0.3rem;
            //    align-items: center;
        }
        .img {
            order: 1;
        }
        .content {
            padding: 0.6rem 0 0.3rem 0;
            text-align: center;
            color: #333;
            h3 {
                font-size: 0.26rem;
                position: relative;
                padding-bottom: 0.4rem;
                &::after {
                    content: "";
                    display: block;
                    position: absolute;
                    width: 0.29rem;
                    height: 1px;
                    background: #aa171f;
                    bottom: 0.15rem;
                    left: 50%;
                    transform: translate(-50%, 0);
                }
            }
            p {
                width: auto;

                font-size: 0.24rem;
                text-align: left;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 6;
                overflow: hidden;
            }
        }
        .content2 {
            padding: 0.6rem 0 0.3rem 0;
            text-align: center;
            color: #333;
            h3 {
                font-size: 0.26rem;
                position: relative;
                padding-bottom: 0.4rem;
                &::after {
                    content: "";
                    display: block;
                    position: absolute;
                    width: 0.29rem;
                    height: 1px;
                    background: #aa171f;
                    bottom: 0.15rem;
                    left: 50%;
                    transform: translate(-50%, 0);
                }
            }
            p {
                width: auto;
                font-size: 0.24rem;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 6;
                overflow: hidden;
            }
        }
    }
    .hiring {
        cursor: pointer;
        width: 0.93rem;
        @include line-hight(0.43rem);
        text-align: center;
        font-size: 0.2rem;
        color: #fff;
        box-sizing: border-box;
        margin-left: 0.3rem;
        margin-right: 0.68rem;
        background: #aa171f;
        border-radius: 0.04rem;
        margin-top: 0.1rem;
    }
    .resume {
        margin: 0 0.8rem;
        padding-bottom: 0.5rem;
        h6 {
            font-size: 0.3rem;
            margin: 0 auto;
            color: #333;
            position: relative;
            text-align: center;
            &::after,
            &::before {
                position: absolute;
                top: 50%;
                content: "";
                max-width: 1.2rem;
                height: 1px;
                background: #e7e7e7;
            }
            &::after {
                left: 0;
            }
            &::before {
                right: 0;
            }
        }
        .input_box {
            width: 100%;
            margin-top: 0.7rem;
            color: #333;
            display: flex;
            flex-direction: column;
            // flex-wrap: wrap;
            // justify-content: space-between;
            .input_item {
                margin-top: 0.3rem;
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                justify-content: space-between;
                align-items: center;
                font-size: 0;
                width: 100%;
                span {
                    display: inline-block;
                    // width: 0.8rem;
                    text-align: center;
                    font-size: 0.2rem;
                    margin-right: 0.1rem;
                    white-space: nowrap;
                }
                input {
                    flex: 1;
                    border: 1px solid #dcdfe6;
                    border-radius: 0.04rem;
                    box-sizing: border-box;
                    padding-left: 0.15rem;
                }
                input,
                .el-input {
                    overflow: hidden;
                    flex: 1;
                    border-radius: 0.04rem;
                    min-height: 0.6rem;
                    // @include line-hight(0.45rem);
                }
                input:focus {
                    // box-sizing: border-box;
                    border: 0.03rem solid #aa171f;
                    border: 0.01rem solid #ccc;
                }
            }
        }
        .textarea {
            margin-top: 0.36rem;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            span {
                // display: inline-block;
                // width: 0.8rem;
                text-align: center;
                font-size: 0.2rem;
                white-space: nowrap;
            }
            textarea {
                border-radius: 0.04rem;
                border: 1px solid #dcdfe6;
                height: 1.81rem;
                margin-left: 0.17rem;
                flex: 1;
                box-sizing: border-box;
                padding-left: 0.1rem;
                font-size: 0.18rem;
            }
        }
        .btns {
            margin-top: 0.4rem;
            display: flex;
            justify-content: flex-start;
            .upload {
                overflow: hidden;
                cursor: pointer;
                width: 1.73rem;
                // height: 0.44rem;
                @include line-hight(0.44rem);
                border: 1px solid #aa171f;
                font-size: 0.24rem;
                color: #aa171f;
                text-align: center;
                position: relative;
                span {
                    display: inline-block;
                    width: 100%;
                    height: 100%;
                }
                input {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    left: 0;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    opacity: 0;
                    font-size: 100px;
                }
            }
            .submit {
                cursor: pointer;
                width: 1.18rem;
                font-size: 0.24rem;
                text-align: center;
                @include line-hight(0.44rem);
                background: #aa171f;
                color: #fff;
                margin-left: 0.17rem;
            }
        }
        .imgs {
            margin-top: 0.4rem;
            display: flex;
            justify-content: flex-end;

            img {
                width: 2.18rem;
                height: 0.44rem;
            }
        }
    }
    .close_box {
        margin: 0 0.8rem;
        @include line-hight(0.8rem);
        background-color: transparent;
        img {
            display: block;
            width: 0.4rem;
            height: 0.4rem;
            margin-top: 0.2rem;
            float: right;
        }
    }
    .page{
        width: 100%;
        height: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
//* 设备宽度大于 320px 小于 640px */
@media only screen and (min-width: 320px) and (max-width: 640px) {
    @include home_sm;
}
@media only screen and (min-width: 641px) and (max-width: 1199px) {
    @include home_lg;
    .social {
        margin: 0 30px;
    }
    .social .title_details1 {
        margin-left: 0px;
    }
    .resume{
        margin: 0;
       h6::after, h6::before{
           width: 25%;
       }
       .input_box .input_item {
           width: 100%;
       }
    }
    
}
@media screen and (min-width: 1200px) {
    @include home_lg;
}
